@import shared.Pojo.VarInfoDataKind
@()(implicit request: RequestHeader, messages: Messages)
	@main(messages("dataManagement"))("dataManage", "") {

		<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/tableFilter.css")">
		<link rel="stylesheet" media="screen" href="@routes.Assets.at("bootstrap-table-master/dist/extensions/fixed-columns/bootstrap-table-fixed-columns.css")">

		<script src="@routes.Assets.at("bootstrap-table-master/dist/extensions/filter-control/my-bootstrap-table-filter-control.js")" type="text/javascript"></script>
		<script src="@routes.Assets.at("bootstrap-table-master/dist/extensions/fixed-columns/my-bootstrap-table-fixed-columns.js")" type="text/javascript"></script>

		<style>
				.genome-pre {
					white-space: pre-wrap;
					word-wrap: break-word;
					border: 0px solid #ccc;
					background-color: white;
				}

				select:not([multiple]) {
					-webkit-appearance: none;
					-moz-appearance: none;
					background-position: right 50%;
					background-repeat: no-repeat;
					background-image: url();
					padding: .5em;
					padding-right: 1.5em
				}

				.fr {
					float: right;
				}

				.base-info .item .title span {
					display: inline-block;
					border-left: 2px solid #0b8af4;
					font-size: 14px;
					color: #333;
					padding-left: 10px;
				}

				.photo span {
					display: block;
					width: 92px;
					height: 92px;
				}

				.photo img {
					width: 100%;
					height: 100%;
				}

				tr > td {
					padding-top: 10px !important;
					padding-bottom: 10px !important;
				}

				.glyphicon-remove::before {
					content: "" !important;
				}

				.fglefttitle {
					font-size: 30px;
					font-weight: lighter;
					color: #A2A2A2;
				}

				.form-horizontal .has-feedback .form-control-feedback {
					top: 0;
					right: -15px !important;
				}

				.has-feedback .form-control {
					padding-right: 10px !important;
				}

				#viewModal .form-group {
					margin-bottom: 0px;
				}

				.myTitle {
					font-size: 15px;
				}

				#subModal select[multiple], #subModal select[size] {
					max-height: 560px;
					height: 560px;
				}

				#matrixFileIntro ul li {
					list-style: disc !important;
				}

				#fileIntro ul li {
					list-style: disc !important;
				}

				#groupModal #multi_d {
					max-height: 710px;
				}

				.myEachGroup select[multiple], .myEachGroup select[size] {
					max-height: 175px;
				}

		</style>

		<div id="matrixFileIntro" style="color: #666;
			display: none">

			<div class="row" style="margin-left: 0px;
				margin-right: 0px;
				margin-top: 10px">

				<div class="col-sm-12" style="padding-left: 10px">
					<ul style="">
						<li>@messages("matrixFileFormat")</li>
						<li>@messages("qcLine1")</li>
						<li>@messages("column1Info")</li>
					</ul>
					<p>
						@messages("examplesAreAsShownBelow")
						：<a href="@routes.DataController.downloadExampleData?fileName=met_data.txt" ><span class="fa fa-download">
					</span></a>
						<br>
						<img style="width: 850px;
							margin-top: 5px" src="@routes.Assets.at("images/matrixFileIntro.jpg")" >

					</p>
				</div>

			</div>

		</div>

		<div class="page-content">

			<div class="row">
				<div class="col-md-12">
					<div id="form_wizard_1" class="portlet light profile-sidebar-portlet bordered">

						<div class="portlet-title">
							<div class="item">
								<div class="title clear">
									<span>@messages("dataManagement")</span>
								</div>
							</div>
							<div class="caption">
							</div>
						</div>

						<div class="portlet-body form" id="dataManage">

							<ul class="nav nav-tabs myMainUl" >

								<li class="active" id="expressLi">
									<a href="#metData" data-toggle="tab" > @messages("matrixFile") </a>
								</li>

								<li class="">
									<a href="#group" data-toggle="tab" > @messages("groupFile") </a>
								</li>

								<li class="">
									<a href="#varInfo" data-toggle="tab" > @messages("varInfoFile") </a>
								</li>

								<li class="">
									<a href="#biom" data-toggle="tab" > @messages("biomFile") </a>
								</li>

							</ul>

							<div id="myTabContent" class="tab-content" style="margin-top: 20px">

								@user.data.matrixFileManage()
								@user.data.groupFileManage()
								@user.data.varInfoFileManage()
								@user.data.biomFileManage()

							</div>

						</div>

						<div id="viewModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
							<div class="modal-dialog" style="width: 1000px">
								<div class="modal-content" id="fileInfo">
									<div class="modal-header bg-primary">
										<h4 class="modal-title">
											<i class="fa fa-eye"></i>
											<span id="lblAddTitle" style="font-weight: bold">
												@{
													messages("fileView")
												}(<span id="fileName"></span>)</span>
										</h4>
										<button type="button" class="close" data-dismiss="modal" aria-hidden="true" >
											<i class="fa fa-remove"></i>
										</button>
									</div>

									<div class="portlet-body form" style="margin-left: 15px;
										margin-right: 15px;
										margin-bottom: 15px">

										<form class="form-horizontal" role="form" >
											<div class="form-body">

												<div class="row">
													<div class="col-md-12">
														<div class="form-group">
															<label class="control-label col-md-2">@messages("tag"):</label>
															<div class="col-md-4">
																<p class="form-control-static" id="tags">  </p>
															</div>
															<label class="control-label col-md-2">@messages("size"):</label>
															<div class="col-md-4">
																<p class="form-control-static" id="size">  </p>
															</div>
														</div>
													</div>
												</div>

												<p class="form-control-static" id="id" style="display: none">  </p>
												<p class="form-control-static" id="kind" style="display: none">  </p>

												<div class="row">
													<div class="col-md-12">
														<div class="form-group">
															<label class="control-label col-md-2">@messages("uploadModifyTime"):</label>
															<div class="col-md-4">
																<p class="form-control-static" id="uploadTime">  </p>
															</div>
															<label class="control-label col-md-2">@messages("comment"):</label>
															<div class="col-md-4">
																<p class="form-control-static" id="comment">  </p>
															</div>
														</div>
													</div>
												</div>

											</div>
										</form>

										<div>

											<div class="table-responsive myFileData myTableData">

												<div id="allFilterContent">

												</div>

												<div style="display: none;
													margin-bottom: 10px">@{
													messages("filteringAndSort")
												}：
													<span id="filterCondition">

														<span class="eachFilterCondition" style="display: none">
															<span >Gene ID</span>
															<span style="color: red">LIKE</span>
															AT
															<sup style="" class="mySup" onclick="SampleManage.removeCondition">
																<i class="fa fa-times-circle"></i>
															</sup>
														</span>

													</span>
												</div>

												<div style="display: none;
													margin-bottom: 10px">@{
													messages("sortingConditions")
												}：
													<span id="sortCondition">

														<span class="eachFilterCondition" style="display: block">
															<span >Gene ID ,</span>
															<span style="color: red">@messages("ascending")</span>
															<sup style="" class="mySup" onclick="SampleManage.removeCondition">
																<i class="fa fa-times-circle"></i>
															</sup>
														</span>

													</span>
												</div>

												<table class="display table table-bordered" id="table" data-click-to-select="true"
												data-page-list="[10, 25, 50, 100, all]" >
													<thead>

														<tr class="myTr">

														</tr>

													</thead>
												</table>

											</div>

											<textarea readonly rows="8" style="display: none;width: 100%" class="myFileData myStrData" ></textarea>

										</div>



									</div>

								</div>
							</div>
						</div>

						@user.soft.fileModal()

					</div>
				</div>
			</div>
		</div>

		<script>

				var id = "@request.session.get("id")"

				$(function () {
					Tool.fileInput
					DataManage.init

				})
		</script>


	}
